<template>
  <div class="publicity-list-view view-container">

    <div class="main-content">

      <div class="list-container">

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="区域招商" name="signedList" v-if="checkTabs('areaCode')"/>
          <el-tab-pane label="精细招商" name="fineList" v-if="checkTabs('fineCode')"/>
          <el-tab-pane label="终端直销" name="directList" v-if="checkTabs('directCode')"/>
          <el-tab-pane label="商业营销" name="businessList" v-if="checkTabs('business')"/>
        </el-tabs>

        <component :is="activeName" ref="refComponent"/>

      </div>

    </div>

  </div>
</template>

<script>
  import {crmStore} from "../../../../store";
  import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs, onActivated} from 'vue'

export default defineComponent({
  name: 'Index1',
  components: {
    signedList: defineAsyncComponent(() =>
        import('./modules/signedList.vue')
    ),
    fineList: defineAsyncComponent(() =>
        import('./modules/fineList.vue')
    ),
    directList: defineAsyncComponent(
            () => import('./modules/directList.vue')
    ),
    businessList: defineAsyncComponent(
            () => import('./modules/businessList.vue')
    )
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var data = reactive({
      tableData: [],
      activeName: 'signedList',
      refComponent:null,
    })

    onMounted(() => {

    })

    onActivated(() =>{
      if (data.refComponent){
        data.refComponent.getList()
      }

    })

    const checkTabs = (type) => {
      return crmStore.getters['company/getMenuPermission'](type)
    }

    const handleClick = () => {

    }

    return {
      ...toRefs(data),

      handleClick,
      checkTabs,
    }
  }
})
</script>

<style scoped>

</style>
